@media (min-width: 320px) {
    .sidebar-collapse .content-wrapper, .sidebar-collapse .right-side, .sidebar-collapse .main-footer {
        margin-left: 50px !important;
        z-index: 840
    }

    .sidebar-collapse .main-sidebar {
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
        width: 50px !important;
        z-index: 850
    }

    .sidebar-collapse .sidebar-menu > li {
        position: relative
    }

    .sidebar-collapse .sidebar-menu > li > a {
        margin-right: 0
    }

    .sidebar-collapse .sidebar-menu > li > a > span {
        border-top-right-radius: 1px
    }

    .sidebar-collapse .sidebar-menu > li:not(.treeview) > a > span {
        border-bottom-right-radius: 1px
    }

    .sidebar-collapse .sidebar-menu > li > .treeview-menu {
        padding-top: 5px;
        padding-bottom: 5px;
        border-bottom-right-radius: 1px
    }

    .sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right), .sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
        display: block !important;
        position: absolute;
        width: 180px;
        left: 50px
    }

    .sidebar-collapse .sidebar-menu > li:hover > a > span {
        top: 0;
        margin-left: -3px;
        padding: 12px 5px 12px 20px;
        background-color: inherit
    }

    .sidebar-collapse .sidebar-menu > li:hover > a {
        background: #00cdff;
        color: #FFF;
    }

    .sidebar-collapse .sidebar-menu > li:hover > a > .pull-right-container {
        position: relative !important;
        float: right;
        width: auto !important;
        left: 180px !important;
        top: -22px !important;
        z-index: 900
    }

    .sidebar-collapse .sidebar-menu > li:hover > a > .pull-right-container > .label:not(:first-of-type) {
        display: none
    }

    .sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
        top: 44px;
        margin-left: 0
    }

    .sidebar-collapse .main-sidebar .user-panel > .info, .sidebar-collapse .sidebar-form, .sidebar-collapse .sidebar-menu > li > a > span, .sidebar-collapse .sidebar-menu > li > .treeview-menu, .sidebar-collapse .sidebar-menu > li > a > .pull-right, .sidebar-collapse .sidebar-menu li.header {
        display: none !important;
        -webkit-transform: translateZ(0)
    }

    .sidebar-collapse .main-header .logo {
        width: 50px
    }

    .sidebar-collapse .main-header .logo > .logo-mini {
        display: block;
        margin-left: -15px;
        margin-right: -15px;
        font-size: 18px
    }

    .sidebar-collapse .main-header .logo > .logo-lg {
        display: none
    }

    .sidebar-collapse .main-header .navbar {
        margin-left: 50px
    }
}

.sidebar-menu:hover {
    overflow: visible
}

.main-sidebar, .left-side {
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 44px;
    min-height: 100%;
    width: 180px;
    z-index: 810;
    -webkit-transition: -webkit-transform .3s ease-in-out, width .3s ease-in-out;
    -moz-transition: -moz-transform .3s ease-in-out, width .3s ease-in-out;
    -o-transition: -o-transform .3s ease-in-out, width .3s ease-in-out;
    transition: transform .3s ease-in-out, width .3s ease-in-out
}

.main-sidebar, .left-side {
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 44px;
    min-height: 100%;
    width: 180px;
    z-index: 810;
    -webkit-transition: -webkit-transform .3s ease-in-out, width .3s ease-in-out;
    -moz-transition: -moz-transform .3s ease-in-out, width .3s ease-in-out;
    -o-transition: -o-transform .3s ease-in-out, width .3s ease-in-out;
    transition: transform .3s ease-in-out, width .3s ease-in-out;
}

.sidebar-collapse .main-sidebar {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
    width: 50px !important;
    z-index: 850;
}

.sidebar-collapse .content-wrapper {
    margin-left: 50px;
}

.sidebar-collapse .main-header .navbar {
    margin-left: 50px;
}

.sidebar-collapse .main-header .logo {
    width: 50px;
}

.sidebar-collapse .sidebar-menu li.header {
    display: none !important;
    -webkit-transform: translateZ(0);
}

.sidebar-collapse .sidebar-menu > li > a > span {
    display: none !important;
    -webkit-transform: translateZ(0);
}

.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
    top: 44px;
    margin-left: 0
}




.content-wrapper {
    position: relative;;background: #FFF;
}
.sub-sidebar {
    width: 180px;float: left;
    bottom: 0;overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    top: 50px;
}

.sub-menu-title {
    width: 180px;font-size: 12px;font-weight: bold;
    height: 70px;text-indent: 20px;line-height: 70px;    background: #D9DEE4;
}
.sub-menu-menus{margin: 0;padding: 0;list-style: none;}
.sub-menu-menus > li{height: 40px;font-size: 12px;background-color: #EAEDF1;overflow: hidden;position: relative;}
.sub-menu-menus > li:hover{background-color: #F4F6F8;}
.sub-menu-menus > li.active{background-color: #fff;}
.sub-menu-menus > li >a{display: block;color: #666;}
.sub-menu-menus .nav-icon{width: 30px;height: 40px;float: left;line-height: 40px;}
.sub-menu-menus .nav-title{width: 138px;height: 40px;float: left;line-height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;}
.sub-menu-menus .nav-extend{width: 38px;height: 40px;float: right;line-height: 40px;position: absolute;right: 0;
    top:0;}